<template>
  <div class="findUserName wfull">
    <a-form-model ref="form" :model="form" :rules="rules" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-form-model-item label="统一社会信用编码" prop="creditCode">
        <ZgInput v-model="form.creditCode" placeholder="请输入统一社会信用编码" />
      </a-form-model-item>
      <a-form-model-item label="手机号" prop="phone">
        <a-row :gutter="10">
          <a-row>
            <a-col :span="16">
              <ZgInput v-model="form.phone" placeholder="请输入注册手机号" />
            </a-col>
            <a-col :span="8">
              <a-button type="primary" @click="getPhoneCode" :disabled="!phoneValidPass">获取验证码</a-button>
            </a-col>
          </a-row>
        </a-row>
      </a-form-model-item>
      <a-form-model-item label="短信验证码" prop="verifyCode">
        <ZgInput v-model="form.verifyCode" placeholder="请输入短信验证码" />
      </a-form-model-item>
      <a-form-model-item label="验证码" prop="captcha">
        <a-row :gutter="10">
          <a-row>
            <a-col :span="16">
              <ZgInput v-model="form.captcha" placeholder="请输入验证码" />
            </a-col>
            <a-col :span="8">
              <img
                @click="getCaptcha()"
                class="wfull h40 cpt pos-rlt"
                style="top: -2px"
                :src="`data:image/png;base64,${captchaImg}`"
              />
            </a-col>
          </a-row>
        </a-row>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: { creditCode: undefined, phone: undefined, verifyCode: undefined, captcha: undefined },
      rules: {
        creditCode: [{ required: true, message: '请输入统一社会信用编码', trigger: 'change' }],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'change' },
          {
            validator: this.teleValidate,
            trigger: 'change'
          }
        ],
        verifyCode: [{ required: true, message: '请输入短信验证码', trigger: 'change' }],
        captcha: [{ required: true, message: '请输入图形验证码', trigger: 'change' }]
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      captchaImg: undefined,
      phoneValidPass: false
    }
  },
  components: {},
  computed: {},
  methods: {
    // 获取图片验证码
    getCaptcha() {},
    // 获取短信验证码
    getPhoneCode() {},
    // 电话号码验证
    teleValidate(rule, value, callback) {
      const mobileRegex = /^1[3-9]\d{9}$/
      if (!value) {
        this.phoneValidPass = false
        callback(new Error('请输入手机号'))
      } else if (!mobileRegex.test(value)) {
        this.phoneValidPass = false
        callback(new Error('请输入正确的手机号格式'))
      } else {
        this.phoneValidPass = true
        callback()
      }
    },
    // 保存
    save() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve()
          }
        })
      })
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang="less" scoped></style>
